<template>
    <div>
        <el-row class="tac">
            <el-col :span="24" style="border-top: 1px solid rgb(255, 208, 75)">
                <el-menu
                        default-active="2"
                        class="el-menu-vertical-demo"
                        @open="handleOpen"
                        @close="handleClose"
                        background-color="#545c64"
                        text-color="#fff"
                        active-text-color="#ffd04b"
                        unique-opened
                style="border-right: none">
                    <el-menu-item index="1">
                        <i class="el-icon-setting"></i>
                        <span slot="title">控制台</span>
                    </el-menu-item>
                    <el-submenu index="2">
                        <template slot="title">
                            <i class="el-icon-upload2"></i>
                            <span>数据上报</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="2-1" @click="goIndex('/Home/dataUpdate/dataUpdate_car')">
                                <i class="el-icon-setting" ></i>
                                <span>上传车辆信息</span>
                            </el-menu-item>

                            <el-menu-item index="2-2" @click="goIndex('/Home/dataUpdate/dataUpdate_driver')">
                                <i class="el-icon-setting"></i>
                                <span>上传司机信息</span>
                            </el-menu-item>

                            <el-menu-item index="2-3" @click="goIndex('/Home/dataUpdate/dataUpdate_wayBill')">
                                <i class="el-icon-setting"></i>
                                <span>上传电子运单</span>
                            </el-menu-item>

                            <el-menu-item index="2-4" @click="goIndex('/Home/dataUpdate/dataUpdate_price')">
                                <i class="el-icon-setting"></i>
                                <span>上传资金流水</span>
                            </el-menu-item>

                        </el-menu-item-group>
                    </el-submenu>

                    <el-submenu index="3">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>车辆信息</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="3-1" @click="goIndex('/Home/car/car_info')">
                                <i class="el-icon-setting" ></i>
                                <span>车辆详情</span>
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>

                    <el-submenu index="4">
                        <template slot="title">
                            <i class="el-icon-position"></i>
                            <span>位置信息</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="4-1" @click="goIndex('/Home/carPosition/carPosition_find')">
                                <i class="el-icon-setting" ></i>
                                <span>查看车辆位置</span>
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>

                    <el-submenu index="5">
                        <template slot="title">
                            <i class="el-icon-position"></i>
                            <span>排名</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="5-1" @click="goIndex('/Home/rank/rank_week')">
                                <i class="el-icon-setting" ></i>
                                <span>周排名</span>
                            </el-menu-item>

                            <el-menu-item index="5-2" @click="goIndex('/Home/rank/rank_month')">
                                <i class="el-icon-setting" ></i>
                                <span>月排名</span>
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>

                    <el-submenu index="6">
                        <template slot="title">
                            <i class="el-icon-position"></i>
                            <span>轨迹动画</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="5-1" @click="goIndex('/Home/animate')">
                                <i class="el-icon-setting" ></i>
                                <span>轨迹动画</span>
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>



                </el-menu>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        name: "ComLeft",
        data(){
            return {

            }
        },
        mounted(){
            window.onresize = window.onload = () => {
                this.initSideHeight()
            }
        },
        methods: {
            initSideHeight(){
                console.log(document.documentElement.clientHeight);
                this.$refs.leftNav.$el.style.height = document.documentElement.clientHeight - 70 - 20 + 'px'
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    }
</script>

<style scoped>

</style>